<template>
	<view>
		<!-- 遮罩层 -->
		<view :class="['mask', storeListShow ? 'mask-show' : 'mask-hide']" @touchstart="clickMask()"></view>
		<!-- 企业/店铺信息 -->
		<view class="header-section">
			<!-- 企业/店铺信息 -->
			<view class="store-box">
				<view class="store-info flex flex-ac-c" @click="storeListDown()">
		
					<view class="info-box">
						<view class="store-name">
							<text class="text">{{ store.storeName }}</text>
							<i-icon icon="iconshouye-zhankai_2" color="#000"></i-icon>
						</view>
						<!-- <view class="com-name">{{ store.companyName }}</view> -->
					</view>
				</view>
		
				<view :class="['store-list', storeListShow ? 'store-list-down' : '']">
					<view class="list">
						<block v-for="(item, i) in storeList" :key="item.id">
							<view class="item flex flex-ac-c" @click="switchStoreInfo(item)">
								<view class="info-box">
									<view class="store-name">
										<text class="text">{{ item.storeName }}</text>
										<i-icon icon="iconbao_1" color="#eb5c02"></i-icon>
									</view>
									<view class="com-name">{{ item.companyName }}</view>
								</view>
							</view>
						</block>
					</view>
		
					<view class="btn">
						<u-button type="primary" shape="circle" size="default">
							<i-icon icon="icontianjia"></i-icon>
							创建企业
						</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				storeList: [],
				storeListShow: false,
			}
		},
		created() {
			this.getStoreList()
		},
		methods:{
			// 切换店铺
			async switchStoreInfo(item) {
				// console.log(item,'24')
				this.storeListShow = !this.storeListShow
				uni.showLoading({
					title: '正在切换店铺'
				})
				try {
					const res = await this.$api.store.SwitchStoreInfo({
						Storeid: item.storeId
					})
					// console.log('switch店铺', res)
					if(res.code===200){
						this.$u.toast('切换成功，请重新登录')
					}
					
				} catch (err) {
					console.log(err)
				}
				uni.hideLoading()
			},
			// 获取店铺列表
			async getStoreList() {
				try {
					const res = await this.$api.store.GetStoreList({
						PageIndex: 1,
						PageSize: 300
					})
					console.log('店铺列表', res)
					this.storeList = res.data.list
				} catch (err) {
					console.log(err)
				}
			},
			goMargin() {
				uni.navigateTo({
					url: '/pages_common/pages_me/margin/margin',
				})
			},
			// 企业店铺列表下拉显示
			storeListDown() {
				this.storeListShow = !this.storeListShow
			},
			
			// 点击遮罩层，收起企业店铺列表
			clickMask() {
				this.storeListShow = false
			},
		}
	}
</script>

<style lang="scss">
	// 头部分
	// 企业店铺信息
	.store-box {
		position: relative;
	
		.store-list {
			width: 100%;
			position: absolute;
			bottom: 0;
			background-color: #fff;
			z-index: 3;
			// box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 0px 0px 20rpx 20rpx;
			transition: all 0.4s;
	
			.list {
				padding: 0 24rpx 0 86rpx;
	
				.item {
					padding: 30rpx 0;
					border-top: 1px solid #eee;
				}
			}
	
			.btn {
				padding: 0 84rpx 30rpx;
			}
		}
	
		.store-list-down {
			transform: translateY(100%);
		}
	}
	// 遮罩层
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba($color: #000000, $alpha: 0.5);
		z-index: 2;
		transition: all 0.4s;
	
		&.mask-hide {
			visibility: hidden;
			opacity: 0;
		}
	
		&.mask-show {
			visibility: visible;
			opacity: 1;
		}
	}
	
	// 头部分
	.header-section {
		background-color: #fbd220;
	
		.store-box {
			.store-name .text {
				margin-right: 12rpx;
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	
		.user-info {
			.com-name {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				line-height: 45rpx;
			}
		}
	
		.store-info {
			position: relative;
			z-index: 6;
			padding: 40rpx 22rpx 20rpx;
			background-color: #fbd220;
	
			.iconshouye-zhankai_2 {
				transform: scale(0.4);
			}
	
			.info-box {
				margin-left: 12rpx;
	
				.store-name {
					margin-right: 12rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: #333333;
	
					.icon {
						display: inline-block;
						overflow: hidden;
						line-height: 34rpx;
					}
				}
			}
		}
	}
	
</style>
